<template>
  <div>
    <button @click="clickHadler">显示/隐藏</button>
    <div>
      <transition name="why" mode="out-in">
       <div v-if="show" class="block">hello wolrd</div>
        <div v-else class="block">你好用户</div>
    </transition>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello',
      show: true
    }
  },
  methods: {
    clickHadler () {
      this.show = !this.show
    }
  }
}
</script>
<style scoped>
.why-enter-active {
  animation: bounce 1s ease
}
.why-leave-active {
  animation: bounce 1s ease reverse;
}
.block {
  display: inline-block;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
</style>
